﻿div, body, html, p, span, ul, li, button, a, img, span {
    text-decoration: none;
    padding: 0;
    margin: 0;
    list-style: none;
}

body {
    font-family: 'Courier New', Courier, 'Nimbus Mono L', monospace;
    font-size: 16px;
}

#wrapper {
    width: 960px;
}

.content {
    display: none;
}

.notification-list > li {
    display: inline-block;
    border: 1px solid black;
    margin-left: 0px;
    margin-right: 0px;
    padding: 5px 15px;
    padding-bottom: 4px;
    position: relative;
}

img {
    width: 15px;
    height: 15px;
}

.notification-list {
    position: relative;
    margin-top: 25px;
    margin-left: 25px;
    background: #ababab; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url();
    background: -moz-linear-gradient(top, #ababab 0%, #dddddd 83%, #dddddd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ababab), color-stop(83%,#dddddd), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ababab 0%,#dddddd 83%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ababab 0%,#dddddd 83%,#dddddd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ababab 0%,#dddddd 83%,#dddddd 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ababab 0%,#dddddd 83%,#dddddd 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ababab', endColorstr='#dddddd',GradientType=0 ); /* IE6-8 */
    width: 472px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

li:first-of-type {
    border-top-left-radius: 15px;
}

.notification-list > li:nth-child(2) {
    margin-left: -1px;
}

.notification-list > li:nth-child(3) {
    margin-left: -1px;
    border-top-right-radius: 15px;
    padding-right: 18px;
}

a {
    color: #777777;
    font-size: 19px;
}

.notification-list > li:hover {
    border-bottom: 0px;
}

.notification-list > li:nth-child(1):hover .content {
    display: block;
    position: absolute;
    border: 0px;
    width: 455px;
    left: -1px;
    padding-left: 15px;
    top: 31px;
    padding-top: 6px;
    background: #d7d7d7;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    height: 85px;
}
.notification-list > li:nth-child(2):hover .content {
    display: block;
    position: absolute;
    border: 0px;
    width: 455px;
    left: -146px;
    padding-left: 15px;
    top: 31px;
    padding-top: 6px;
    background: #d7d7d7;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    height: 53px;
}
.notification-list > li:nth-child(3):hover .content {
    display: block;
    position: absolute;
    border: 0px;
    width: 455px;
    left: -346px;
    padding-left: 15px;
    top: 31px;
    padding-top: 6px;
    background: #d7d7d7;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    height: 133px;
}
.notification-list > li:hover .content img {
    margin-right: 5px;
}

.notification-list > li:hover .content li:hover {
    text-decoration: underline;
}

.notification-list > li:hover .content li {
    margin-bottom: 10px;
}

.notification-list > li:hover .content a {
    font-size: 16px;
}
